<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #app{position:relative;overflow:hidden;margin:0 auto;width:300px;height:500px;border:10px solid #000}
    .cir{transform:translateX(-100px) translateY(200px) rotate(0);animation:cir 6s linear infinite}
    .cir,.yourBackground{width:500px;height:500px;border-radius:50%}
    .yourBackground{position:absolute;top:200px;left:-75pt;background:#ff0}
    .car{box-sizing:border-box;padding-top:10px;width:20px;height:11px;border-radius:0 50% 50% 0;background:green;transform:translateY(-5px) rotateX(0);animation:car 6s linear backwards infinite}
    .banjin{width:20px;height:250px;transform:translateX(245px)}
    @keyframes car{
      0%,49%{transform:translateY(-5px) rotateY(0)}
      50%,99%{transform:translateY(-5px) rotateY(180deg)}
      to{transform:translateY(-5px) rotateY(360deg)}
    }
    @keyframes cir{
      0%{transform:translateX(-100px) translateY(200px) rotate(-36deg)}
      50%{transform:translateX(-100px) translateY(200px) rotate(33deg)}
      to{transform:translateX(-100px) translateY(200px) rotate(-36deg)}
    }
  </style>
</head>
<body>
<div id="app" >
  <div class="yourBackground">
  </div>
  <div class="cir">
    <div class="banjin">
      <div class="car"></div>
    </div>
  </div>
</div>
</body>
</html>
